<script setup lang="ts">
import { ref, computed } from 'vue'
import { addFeedbackUsingPost } from '@/services/my'
import type { Feedback } from '@/types/my'
import { useMemberStore } from '@/stores'

const memberStore = useMemberStore()
const suggestion = ref<string>('')

// 多选问题选项
const problemOptions = ['界面卡顿', '无法加载', '功能异常', '其他问题']
const selectedProblems = ref<string[]>([])

// 切换选中状态，只允许选择一个问题
const toggleProblem = (problem: string) => {
  if (selectedProblems.value.includes(problem)) {
    selectedProblems.value = [] // 如果已经选中，取消所有选择
  } else {
    selectedProblems.value = [problem] // 只保留当前选中的问题
  }
}

// 获取用户信息
const openid = computed(() => memberStore.getProfileField('openid'))
const nickname = computed<string | undefined>(() => memberStore.getProfileField('nickName'))

/** 提交反馈 */
const submitFeedback = async () => {
  if (!openid.value) {
    uni.showModal({
      title: '提示',
      content: '您尚未登录，请先登录。',
      showCancel: true,
      confirmText: '去登录',
      success: (res) => {
        if (res.confirm) {
          uni.navigateTo({
            url: '/pages/login/login',
          })
        }
      },
    })
    return
  }

  if (!suggestion.value && selectedProblems.value.length === 0) {
    uni.showToast({
      title: '请填写问题描述或选择问题',
      icon: 'none',
    })
    return
  }

  try {
    const feedbackData: Feedback = {
      feedbackContent: `${selectedProblems.value.join(', ')}: ${suggestion.value.trim()}`,
      nickname: nickname.value,
      openid: openid.value,
    }

    await addFeedbackUsingPost(feedbackData)
    uni.showToast({
      title: '反馈已提交',
      icon: 'success',
    })
    suggestion.value = ''
    selectedProblems.value = []
  } catch (error) {
    uni.showToast({
      title: '提交失败，请稍后重试',
      icon: 'none',
    })
    console.error('提交反馈失败:', error)
  }
}

/** 计算输入字数 */
const suggestionLength = computed(() => suggestion.value.trim().length)

/** 提交按钮是否禁用 */
const isSubmitDisabled = computed(() => {
  return suggestion.value.trim() === '' && selectedProblems.value.length === 0
})
</script>

<template>
  <view class="feedback-container">
    <!-- 反馈问题 -->
    <view class="section">
      <view class="title">反馈问题</view>
      <view class="problem-options">
        <view
          v-for="problem in problemOptions"
          :key="problem"
          class="problem-option"
          :class="{ selected: selectedProblems.includes(problem) }"
          @click="toggleProblem(problem)"
        >
          {{ problem }}
        </view>
      </view>
    </view>

    <!-- 问题描述 -->
    <view class="section">
      <view class="title">问题描述</view>
      <textarea v-model="suggestion" placeholder="请输入问题描述" class="textarea"></textarea>
      <view class="char-count">已输入字数：{{ suggestionLength }} / 500</view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-section">
      <button @click="submitFeedback" :disabled="isSubmitDisabled" class="submit-btn">提交</button>
    </view>
  </view>
</template>

<style scoped lang="scss">
.feedback-container {
  height: 100vh;
  background-color: #f7f7f7;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
}

.section {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;
  width: 100%;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
}

.problem-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.problem-option {
  padding: 15rpx 30rpx;
  border: 1rpx solid #ddd;
  border-radius: 25rpx;
  background-color: #f2f2f2;
  color: #555;
  font-size: 24rpx;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  /* 禁用虚影 */
  box-shadow: none; /* 去除可能的外部阴影 */
  outline: none; /* 去除默认的蓝色虚影 */
}

.problem-option.selected {
  background-color: #28bb9c;
  color: #fff;
}

.problem-option:focus {
  outline: none; /* 去掉焦点虚框 */
}

.title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.textarea {
  width: 100%;
  height: 200rpx;
  margin: 10rpx 0;
  padding: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 12rpx;
  font-size: 28rpx;
  background-color: #fff;
  outline: none;
  box-sizing: border-box;
  resize: none;
  overflow-x: hidden;
}

.textarea:focus {
  border-color: #28bb9c;
  box-shadow: 0 0 5rpx #28bb9c;
}

.char-count {
  text-align: right;
  font-style: italic;
  font-size: 24rpx;
  color: #666;
}

.submit-section {
  width: 90%;
  text-align: center;
}

.submit-btn {
  width: 40%;
  padding: 15rpx;
  background-color: #28bb9c;
  color: white;
  border: none;
  border-radius: 8rpx;
  font-size: 24rpx;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-btn:disabled {
  background-color: #28bb9c;
  cursor: not-allowed;
}
</style>
